﻿<UserControl x:Class="OI.Controls.Toolbox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
    xmlns:Media="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" 
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    
    <Grid Name="LayoutRoot">
        <ItemsControl x:Name="IC" ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid Visibility="{Binding EnabledVisibility}" Margin="0,0,2,0">
                        
                        <RadioButton Name="rbItem"
                            GroupName="{Binding Group}" 
                            IsChecked="{Binding IsSelected, Mode=TwoWay}"
                            Checked="ItemChecked" 
                            Tag="{Binding Key}">

                            <RadioButton.Template>
                                <ControlTemplate>
                                    <Grid>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CheckStates">
                                                <VisualState x:Name="Checked">
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="imgItem" 
                                                         Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                         Duration="0:0:0.5" To="1"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Unchecked">
                                                    <Storyboard>
                                                        <DoubleAnimation Storyboard.TargetName="imgItem" 
                                                         Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                         Duration="0:0:0.5" To="0.2"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>

                                        <Border BorderBrush="{StaticResource ThemeColorBrush}" BorderThickness="1">
                                            <Image Name="imgItem"
                                               Margin="4"
                                               Width="{Binding ImageSize}"
                                               Height="{Binding ImageSize}"
                                               Source="{Binding ImageSource}"
                                               Opacity="0"/>
                                        </Border>

                                    </Grid>
                                </ControlTemplate>
                            </RadioButton.Template>
                        </RadioButton>

                        <!--highlight-->
                        <Border Name="hlImg" BorderBrush="{StaticResource ThemeColorBrush}" Background="#01000000"
                                BorderThickness="1" IsHitTestVisible="True" Opacity="0">
                            <Border.Resources>
                                <Storyboard x:Key="HLOFF">
                                    <DoubleAnimation Storyboard.TargetName="hlImg" 
                                                             Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                             Duration="0" To="0"/>
                                </Storyboard>
                                <Storyboard x:Key="HLON">
                                    <DoubleAnimation Storyboard.TargetName="hlImg" 
                                                             Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                             Duration="0" To="0.4"/>
                                </Storyboard>
                            </Border.Resources>

                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseEnter">
                                    <Media:ControlStoryboardAction Storyboard="{StaticResource HLON}"/>
                                </i:EventTrigger>
                                <i:EventTrigger EventName="MouseLeave">
                                    <Media:ControlStoryboardAction Storyboard="{StaticResource HLOFF}"/>
                                </i:EventTrigger>
                                <i:EventTrigger EventName="MouseLeftButtonDown">
                                    <ei:ChangePropertyAction TargetName="rbItem" PropertyName="IsChecked" Value="True" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                            
                            <Image Width="{Binding ImageSize}"
                                                Height="{Binding ImageSize}"
                                                Source="{Binding ImageSource}"
                                                Margin="4"
                                                ToolTipService.ToolTip="{Binding Tooltip}">
                                
                            </Image>
                        </Border>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>

            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Controls:WrapPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

        </ItemsControl>
    </Grid>
</UserControl>
